import React from 'react';
import { Layout, Menu, Button, theme } from 'antd';
import {
    DashboardOutlined,
    PictureOutlined,
    AppstoreOutlined,
    SettingOutlined,
    LogoutOutlined,
} from '@ant-design/icons';
import './MainLayout.css';

const { Header, Sider, Content } = Layout;

const MainLayout = ({ children, onLogout, currentContent, setCurrentContent }) => {
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();

    const menuItems = [
        {
            key: 'dashboard',
            icon: <DashboardOutlined />,
            label: '仪表板',
        },
        {
            key: 'album',
            icon: <PictureOutlined />,
            label: '相册',
        },
        {
            key: 'gallery',
            icon: <AppstoreOutlined />,
            label: '图库',
        },
        {
            key: 'account',
            icon: <SettingOutlined />,
            label: '账号设置',
        },
    ];

    const handleMenuClick = ({ key }) => {
        setCurrentContent(key);
    };

    return (
        <Layout style={{ minHeight: '100vh' }}>
            <Sider
                theme="dark"
                width={200}
                style={{
                    overflow: 'auto',
                    height: '100vh',
                    position: 'fixed',
                    left: 0,
                    top: 0,
                    bottom: 0,
                }}
            >
                <div className="logo">图库管理系统</div>
                <Menu
                    theme="dark"
                    mode="inline"
                    selectedKeys={[currentContent]}
                    items={menuItems}
                    onClick={handleMenuClick}
                />
            </Sider>
            <Layout style={{ marginLeft: 200 }}>
                <Header
                    style={{
                        padding: '0 16px',
                        background: colorBgContainer,
                        display: 'flex',
                        justifyContent: 'flex-end',
                        alignItems: 'center',
                    }}
                >
                    <Button
                        type="text"
                        icon={<LogoutOutlined />}
                        onClick={onLogout}
                    >
                        退出登录
                    </Button>
                </Header>
                <Content
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        background: colorBgContainer,
                        borderRadius: borderRadiusLG,
                        minHeight: 280,
                    }}
                >
                    {children}
                </Content>
            </Layout>
        </Layout>
    );
};

export default MainLayout; 